<template>
    <div class="cart">
        <van-nav-bar title="购物车" :right-text="editingMsg" @click-left="backUp" @click-right="edit"/>
        <main class="goods">
            <ul class="cart-good">
                <li v-for="(good, goodIndex) in goodsList" :key="good.cart_id" class="cart-goods-item">
                    <div class="check-container" @click="selectSingel(good.cart_id)" v-show="!editing">
                        <input type="checkbox" :checked="allSelectData.indexOf(good.cart_id)!=-1"/>
                    </div>
                    <div class="cart-goods-item">
                        <div class="pd-images">
                            <img :src="good.goods_cover" alt/>
                        </div>
                        <div class="pd-info">
                            <div class="pd-title">{{good.goods_name}}</div>
                            <div class="pd-sku">
                                <p class="sku-info">{{good.goods_attr}}</p>
                            </div>
                            <div class="pd-price">
                                <div class="total">
                                    <span>&yen;</span>
                                    {{good.goods_price}}
                                </div>
                                <!-- 显示状态 -->
                                <div class="counter" v-show="!editing">
                                    ×{{good.goods_num}}
                                    <!---->
                                </div>
                                <!-- 编辑状态 -->
                                <div class="counter" v-show="editing">
                                    <button
                                            @click="reduce(good,good.cart_id, good.goods_num)"
                                            :disabled="good.goods_num === 1"
                                    >&minus;
                                    </button>
                                    <span>&nbsp;&nbsp;{{good.goods_num}}&nbsp;&nbsp;</span>
                                    <button @click="plus(good,good.cart_id, good.goods_num)">&plus;</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <van-icon
                            name="delete"
                            class="remove"
                            v-show="editing"
                            @click.stop="removeSingel(goodIndex,good.cart_id)"
                    />
                </li>
            </ul>
        </main>
        <footer>
            <div class="select-all" v-show="!editing">
                <input type="checkbox" @click="selectAll" v-model="allChecked" id="selectAllG"/>
                <label for="selectAllG">全选</label>
            </div>
            <div class="select-all" v-show="editing">
                <input type="checkbox" @click="removeAll" v-model="removedAllChecked" id="selectAllG"/>
                <label for="selectAllG">全选</label>
            </div>
            <!-- 显示状态 -->
            <div class="total-price" v-show="!editing">
        <span>
          合计：¥
          <b>{{totalPrice}}</b>
        </span>
                <button
                        :class="{balance: allSelectData.length}"
                        :disabled="!allSelectData.length"
                        @click.stop="balance(allSelectData)"
                >结算 ({{allSelectData.length}})
                </button>
            </div>
        </footer>
    </div>
</template>
<script>
    import api from "@/utils/api";

    export default {
        data() {
            return {
                rightText: "编辑",
                goodsList: [],
                //控制全选
                allChecked: false,
                removedAllChecked: false,
                //商品数据选中
                allSelectData: [],
                removeListData: [],
                editing: false,
                editingMsg: "编辑"
            };
        },
        methods: {
            // 获取购物车
            getGoodsList() {
                this.$axios({
                    method: "GET",
                    url: api.cartlist,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.goodsList = res;
                });
            },
            backUp() {
                alert("返回");
            },
            // 编辑 与 完成  切换
            edit() {
                this.editing = !this.editing;
                this.editingMsg === "编辑"
                    ? (this.editingMsg = "完成")
                    : (this.editingMsg = "编辑");
            },
            //单击全选按钮
            selectAll() {
                if (!event.currentTarget.checked) {
                    //取消全选
                    this.allSelectData = [];
                } else {
                    //全选
                    this.goodsList.forEach(good => {
                        this.allSelectData.push(good.cart_id);
                    });
                }
            },
            selectSingel(id) {
                //知道当前点击商品对应的商品编号是否在allSelectData数组中
                var res = this.allSelectData.indexOf(id);
                console.log(res);
                res == -1
                    ? this.allSelectData.push(id)
                    : this.allSelectData.splice(res, 1);
                console.log(this.allSelectData);
                // this.allChecked = this.goodsList.length === this.allSelectData.length;
            },
            // 单个按钮删除
            removeSingel(goodIndex, cart_id) {
                this.$axios({
                    method: "post",
                    url: api.cart_dele,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token"),
                        cart_id
                    })
                }).then(res => {
                    console.log(res);
                    this.goodsList.splice(goodIndex, 1);
                });
            },
            // 全选删除
            removeAll(id) {
                console.log(event.currentTarget.checked);
                if (!event.currentTarget.checked) {
                    //取消全选
                    this.removeListData = [];
                } else {
                    //全选
                    this.goodsList.forEach(good => {
                        this.removeListData.push(good.cart_id);
                    });
                }
            },
            removeList() {
                alert(`删除${this.removeListData.length}项`);
            },
            reduce(good, cart_id, goods_num) {
                if (good.goods_num <= 1) {
                    return;
                } else {
                    this.disabled = true;
                    goods_num--;
                    this.updateCount(cart_id, goods_num);
                    good.goods_num--;
                }
            },
            plus(good, cart_id, goods_num) {
                this.disabled = true;
                goods_num++;
                this.updateCount(cart_id, goods_num);
                good.goods_num++;
            },
            updateCount(cart_id, goods_num) {
                this.$axios({
                    method: "post",
                    url: api.cart_update,
                    data: this.$qs.stringify({
                        cart_id,
                        goods_num,
                        token: localStorage.getItem("token")
                    })
                }).then(res => {
                    console.log(res)
                });
            },
            balance(list) {
                console.log(list);
                const cart_id = list.join(",");
                this.$axios({
                    method: "post",
                    url: api.order_confirm,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token"),
                        cart_id
                    })
                }).then(res => {
                    this.$router.push({
                        name: "orderconfirm",
                        query: {
                            buy_type: "cart",
                            cart_id
                        }
                    });
                });
            }
        },
        mounted() {
            this.getGoodsList();
        },
        computed: {
            totalPrice() {
                var total = 0;
                this.goodsList.forEach(good => {
                    var res = this.allSelectData.indexOf(good.cart_id);
                    //计算总价只计算在allSelectData商品
                    if (res != -1) {
                        total += good.goods_num * good.goods_price;
                    }
                });
                return total;
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .cart {
        background-color: @borderColor;
        height: calc(100vh - 50px);
        overflow-y: scroll;

        > nav {
            .flexbox();
            font-size: 14px;
            color: #fff;
            text-align: center;
            background-color: @secColor;
            height: 44px;

            > button {
                color: #fff;
                padding: 0 20px;
                font-size: 14px;
            }
        }

        > main {
            margin-top: 5px;

            > ul {
                > li {
                    background-color: @bgColor;
                    margin: 1px 0;
                    padding: 0 15px;
                    .flexbox(space-between, center, row, nowrap);

                    > .check-container {
                        flex-basis: 20px;
                        // border: 1px solid red;
                    }

                    > .remove {
                        background-color: @bgColor;
                        // border: 1px solid @tipColor;
                        color: @secColor;
                        flex-basis: 20px;
                        text-align: center;
                        align-items: stretch;
                        height: 100%;
                    }
                }
            }
        }

        .card-info {
            flex: 7;
            width: 200px;
            position: relative;
            font-size: 14px;

            h3 {
                .font-dpr(16px);
                .textoverflow();
            }

            span {
                color: @priColor;
            }
        }

        > footer {
            height: 48px;
            position: fixed;
            bottom: 0;
            width: 100%;
            .flexbox();

            > .select-all {
                margin-left: 20px;
                flex: 0.5;
            }

            > .total-price {
                padding: 0 15px;
                // border:1px solid red;
                max-width: 100vw;
                box-sizing: border-box;
                .flexbox(space-between, center, row, nowrap);
                position: relative;

                > span {
                    // color: @priColor;
                    .font-dpr(16px);

                    b {
                        color: @priColor;
                    }
                }

                > button {
                    position: relative;
                    right: 0;
                    height: 40px;
                    width: 80px;
                    border: none;
                    border-radius: 2px;
                    .font-dpr(16px);
                    margin-left: 10px;

                    :disabled {
                        background-color: @tipColor;
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                }

                > .balance {
                    background-color: @priColor;
                    color: @bgColor;
                }

                position: fixed;
                // border:1px solid red;
                bottom: 48px;
                width: 100vw;
                height: 1.25rem;
                background-color: @bgColor;
            }
        }
    }

    .balance-bar {
        position: fixed;
        // border: 1px solid red;
        z-index: 999;
        bottom: 96px;
        width: 100vw;
        height: 1.25rem;
        background-color: @bgColor;
        .flexbox(space-between, center, row, nowrap);

        .checked-all {
            flex: 7;
            // border: 1px solid red;
            background: @bgColor;
            .font-dpr(12px);
            height: 100%;
            padding-left: 15px;
            width: 70%;
            // .flexbox(flex-start, center, row, nowrap);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: initial;
            .font-dpr(14px);

            .total {
                margin-left: 20px;
                margin-right: 20px;
                .font-dpr(14px);
                .textoverflow(1);

                span {
                    color: @secColor;
                }
            }
        }

        .pay {
            // width: 30%;
            flex: 3;
            height: 30px;
            // background: @priColor;
            color: @bgColor;
            margin-right: 15px;
            background: @priColor;
            border-radius: 15px;
            .flexbox(center, center, row, nowrap);

            strong {
                .font-dpr(14px);
                font-weight: normal;

                span {
                    .font-dpr(14px);
                }
            }
        }
    }

    .goods {
        margin-bottom: 46px;

        .cart-good {
            .flexbox(flex-start, space-between, column, wrap);
            background: transparent;
            flex: initial;

            .van-cell__value {
                .flexbox(center, center, row, nowrap);
            }

            .cart-goods-item {
                // width: 90vw;
                // border: 1px solid #f9f;
                .flexbox(flex-start, center, row, nowrap);
                justify-content: space-between;
                padding: 5px 10px;
                // border-bottom: 1px solid @borderColor;
                &:last-child {
                    border-bottom: none;
                }

                .pd-images {
                    margin-right: 10px;
                    flex: 1;
                    // max-width: 100px;
                    img {
                        width: 90px;
                        height: 90px;
                    }
                }

                .pd-info {
                    flex: 3;

                    .pd-title {
                        position: relative;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        /* autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                        -webkit-line-clamp: 2;

                        max-width: 100%;
                        .font-dpr(12px);
                        color: @fontColorH3;
                    }

                    .pd-sku {
                        padding: 5px 0;
                        line-height: 1.5;
                        .font-dpr(11px);
                        color: @tipColor;
                    }

                    .pd-price {
                        margin-top: 10px;

                        .total {
                            .font-dpr(14px);
                            color: @secColor;
                            // border:1px solid red;
                            flex: 5;
                        }

                        .flexbox(space-between, center, row, nowrap);
                        // flex: initial;
                        .counter {
                            // border:1px solid red;
                            .font-dpr(14px);
                            color: @fontColorP;
                            display: flex;
                            flex: 1;

                            span {
                                background-color: @borderColor;
                            }

                            button {
                                // border:1px solid blue;
                                background-color: #fff;
                                padding: 0 6px;
                            }
                        }
                    }
                }

                .van-checkbox {
                    // border: 1px solid @fontColorH3;
                    position: absolute;
                    left: 0;
                }
            }
        }
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -webkit-appearance: none;
        border: 1px solid #c9c9c9;
        border-radius: 50%;
        outline: none;
    }

    input[type="checkbox"]:checked {
        background: url("../../assets/imgList/checked.jpg") no-repeat center;
        background-size: 25px 25px;
        border: 0;
    }

    // 右上角  编辑按钮
    .van-nav-bar__text {
        color: @priColor;
    }

    .van-cell {
        // border:1px solid red;
        margin-bottom: 8px;
        border-radius: 6px;
        padding: 10px;

        .total {
            color: @priColor;
        }
    }

    .van-cell:not(:last-child)::after {
        left: 0;
    }

    /deep/ .van-swipe-cell__right {
        // border:1px solid red;
        background-color: @secColor;
        width: 70px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

